<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小球</title>
    <script type="text/javascript">
    var ball = {x:50,y:100,r:20,g:2,vx:1,vy:0,color:"black"};
    window.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 300;
    setInterval(
    function () {
    update();
    render(context);
    },50)
    };
    function update() {
    ball.x+=ball.vx;
    ball.y+=ball.vy;
    ball.vy+=ball.g;
    if(ball.y>=canvas.height-ball.r) {//小球接触底边沿反弹
    ball.y = canvas.height - ball.r
    ball.vy = -ball.vy * 0.8
    }
    }
    function render(cxt) {
    cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
    cxt.fillStyle = ball.color;
    cxt.beginPath();
    cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
    cxt.closePath();
    cxt.fill();
    }
    </script>
</head>
<body>
<canvas id="canvas" style="border: 1px solid red"></canvas>
</body>
</html>